import React, { ReactElement, useEffect } from 'react'
import { Input, Button, Table, Space, Row } from 'antd'
import { connect } from 'umi'
import styles from './list.less'
const { Search } = Input;

interface Props {
    hero?: any,
    dispatch: Function,
    init: Function
}

const columns = [
    { 
        title: '序号', 
        align: "center",
        key: 'index',
        render: (row: any, item: any, index: number) => <span key={ row._id }>
            { index + 1 }
        </span>
    },
    { title: '英雄名称', dataIndex: 'name', key: 'name', align: "center" },
    { title: '英雄称号', dataIndex: 'title', key: 'title', align: "center" },
    { 
        title: '所属分类', 
        dataIndex: 'cate', 
        key: 'cate',
        align: "center",
        render: (row: any) => {
            return <Space>
                {
                    row.map((item: any) => {
                        return <span key={ item._id }>
                            { item.name }
                        </span>
                    })
                }
            </Space>
        } 
    },
    { 
        title: '头像', 
        dataIndex: 'avatar', 
        key: 'avatar',
        render: (img: string) => {
            return <img style={{
                width: 50
            }} src={ img } alt="" />
        } 
    },
    {
        title: '操作',
        align: "center",
        key: 'action',
        render: () => <Space>
            <Button type="primary">编辑</Button>
            <Button type="primary" danger>删除</Button>
        </Space>
    },
];

function List({ hero, dispatch, init }: Props): ReactElement {
    function onSearch(val: string) {
        console.log(val)
    }
    useEffect(() => {
        init()
    }, [])
    return (
        <div>
            <Search placeholder="请输入英雄名称" onSearch={onSearch} style={{ width: 300 }} />
            <Button type="primary">添加英雄</Button>

            <div>
                <Table
                    columns={columns}
                    bordered
                    pagination={hero.pageInfo}
                    expandable={{
                        expandedRowRender: record => {
                            console.log(record)
                            return <ul className={ styles.oul } style={{ margin: 0 }}>
                                {
                                    record.skills.map((item: any) => {
                                        return <li key = { item._id}>
                                            <img style={{
                                                width: 59
                                            }} src={ item.icon } alt="" />
                                            <p>
                                                { item.name }
                                            </p>
                                        </li>
                                    })
                                }
                            </ul>
                        }
                    }}
                    dataSource={ hero.heroList }
                />
            </div>
        </div>
    )
}

const mapState = (state: any) => {
    const { hero } = state
    return {
        hero
    }
}

const mapDispatch = (dispatch: any) => {
    return {
        init() {
            dispatch({ type: "hero/getHeroList" })
        }
    }
}


export default connect(mapState, mapDispatch)(List)
